<template>
  <div>
    <section>
      <div class="section-header">
        <div>变更信息 <a-button class="hte-btn add-btn" type="primary" @click="handleAdd({companyId:companyId})"  v-has="'companyChange:edit'">新增</a-button></div>
             <a-input-search style="width:280px" v-model="keyword" @search="loadData" :allowClear="true" placeholder="请输入关键字进行搜索" />

      </div>
      <div class="section-table">
        <div>
          <a-table
          ref="table"
            class="hte-table-content"
            :columns="columns"
            :data-source="reservationData"
            :pagination="pagination"            
            :loading="tabLoading"
            bordered
            size="middle"
            @change="pageChange"
          >
            <template slot="num" slot-scope="text, record, index">
              {{ (currPageIndex - 1) * currPageSize + parseInt(index) + 1 }}
            </template>
            <template slot="projectNo" slot-scope="text, record, index">
              <a :title="text" @click="handleClick(record)">{{text}}</a> 
            </template>
             <template slot="newContent" slot-scope="text, record, index">
              <div v-for="(item,charIndex) of text" :key="charIndex" :class="[{changeColor:contentContrast('oldContent',record,item,charIndex)}, 'mes']">{{item}}</div> 
            </template>
            <template slot="oldContent" slot-scope="text, record, index">
              <div v-for="(item,charIndex) of text" :key="charIndex" :class="[{changeColor:contentContrast('newContent',record,item,charIndex)}, 'mes']">{{item}}</div> 
            </template>
            <template slot="operation" slot-scope="text, record, index">
                  <a @click="handleEdit(record)"  v-has="'companyChange:edit'">编辑</a>
                  <a-divider type="vertical" />
                  <a-popconfirm v-has="'companyChange:edit'" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
                </template>
          </a-table>
        </div>
      </div>
    </section>
    <HteInfoChangeModal ref="modalForm" @ok="modalFormOk"></HteInfoChangeModal>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import HteInfoChangeModal from '../modules/HteInfoChangeModal'
  import {filterHasPermission} from '@/utils/hasPermission'
export default {
  name: 'InfoChange',
  props: {
    companyId: {
      type: String,
      default: '',
    },
  },
 mixins:[JeecgListMixin, mixinDevice],
    components: {
      HteInfoChangeModal
    },
  data() {
    return {
       columns: [
        {
          title: '序号',
          dataIndex: 'num',
          width: '10%',
          align: 'center',
          scopedSlots: { customRender: 'num' },
        },
        {
          title: '项目编号',
          dataIndex: 'projectNo',
          width: '10%',
          align: 'center',
          scopedSlots: { customRender: 'projectNo' },
        },
        {
          title: '变更事项',
          dataIndex: 'changeOptionName',
          width: '10%',
          align: 'center',
        },
        
        {
          title: '变更前内容',
          dataIndex: 'oldContent',
          width: '25%',
          align: 'center',
           scopedSlots: { customRender: 'oldContent' },
        },
        {
          title: '变更后内容',
          dataIndex: 'newContent',
          width: '25%',
          align: 'center',
          scopedSlots: { customRender: 'newContent' },
        },
        {
          title: '核准日期',
          dataIndex: 'changTime',
          width: '10%',
          align: 'center',
        },
         
      ],
      reservationData: [],
      pagination: {
        total: 0,
        current: 1,
      },
      tabLoading: false,
      currPageIndex: 1,
      currPageSize: 10,
      url: {
          list: "/libraryCompany/hteLibCompanyChange/list",
          delete: "/libraryCompany/hteLibCompanyChange/delete",
          deleteBatch: "/libraryCompany/hteLibCompanyChange/deleteBatch",
          exportXlsUrl: "/libraryCompany/hteLibCompanyChange/exportXls",
          importExcelUrl: "libraryCompany/hteLibCompanyTeam/importExcel",
          
        },
        queryParam:{
             companyId: this.companyId,
             order:'desc',
            column:'changTime',
            keyword:'',
        },
            keyword:'',

    }
  },
  
     
  mounted() {
    this.loadData();
    if(filterHasPermission('companyChange:edit')){
      this.columns.push( {
          title: '操作',
          dataIndex: 'operation',
          width: '10%',
          align: 'center',
          scopedSlots: { customRender: 'operation' },
        })
    }
  },
  methods: {
    handleAdd: function(record) {
            this.$refs.modalForm.add(record);
            this.$refs.modalForm.title = "新增";
            this.$refs.modalForm.disableSubmit = false;
        },
    pageChange(page) {
      this.currPageIndex = page.current
      this.currPageSize = page.pageSize
      this.pagination.current = page.current
      this.loadData()
    },
     handleClick(record){
       let urlJump = this.$router.resolve({ path: `/approval?projectBuildId=${record.projectBuildId}` })
       window.open(urlJump.href, '_blank')
    },
     modalFormOk(res) {
      this.loadData();
    },
 
    /**
     * 
     */
    loadData() {
      this.tabLoading = true
      getAction('/libraryCompany/hteLibCompanyChange/list', {
        companyId: this.companyId,
        pageSize: this.currPageSize,
        pageNo: this.currPageIndex,
        order:'desc',
        column:'changTime',
        keyword:this.keyword,
      }).then((res) => {
        if (res.code == 200 && res.result) {
          this.pagination.total = res.result.total
          res.result.records.forEach((item, index) => {
            item.key = index
          })
          this.reservationData = res.result.records
          this.tabLoading = false
        } else {
          this.$message.warning('数据加载失败:' + res.message)
          this.tabLoading = false
        }
      })
    },
    contentContrast(key,record,text,charIndex){
      let content = record[key]
      // if(!content || content.charAt(charIndex) != text){
      if(!content || content.indexOf(text) == -1){
        return true
      }
     
      return false
    }
  },
   getSuperFieldList(){
        let fieldList=[];
        
        this.superFieldList = fieldList
      }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.mes{display: inline-block;}
</style>